<template>
  <div class="wrapper">
    <div class="sj-content">
      <div class="left-nav">
        <div class="float-nav" id="float-nav">
          <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical">
            <li class="active">
              <a>热门</a>
            </li>
            <li>
              <a href="#">牛人专区</a>
            </li>
            <li>
              <a href="#">机器学习</a>
            </li>
            <li>
              <a href="#">后端开发</a>
            </li>
            <li>
              <a href="#">人工智能</a>
            </li>
            <li>
              <a href="#">虚拟现实</a>
            </li>
            <li>
              <a href="#">商业预测</a>
            </li>
            <li>
              <a href="#">前端开发</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="right-content">
        <div class="fl middle">
          <div class="carousel">
            <div
              id="myCarousel"
              data-ride="carousel"
              data-interval="4000"
              class="sui-carousel slide"
            >
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="active item">
                  <img src="~/assets/img/widget-banner01.png">
                </div>
                <div class="item">
                  <img src="~/assets/img/widget-banner02.png">
                </div>
                <div class="item">
                  <img src="~/assets/img/widget-banner01.png">
                </div>
              </div>
            </div>
          </div>
          <div class="data-list">
            <ul class="headline fixed" id="headline">
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src>
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月22日 12:01</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p
                  class="content"
                >滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src>
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月12日 13：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p
                  class="content"
                >滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src="~/assets/img/widget-list01.png">
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月12日 13：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p class="content"></p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src>
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月7日 10：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p
                  class="content"
                >滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src="~/assets/img/widget-list02.png">
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月12日 13：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p class="content"></p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src>
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月7日 10：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p
                  class="content"
                >滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p>
              </li>
            </ul>
            <div class="stop">
              <a href="javascript:;">32分钟前看到这里，点击刷新
                <i class="fa fa-refresh" aria-hidden="true"></i>
              </a>
            </div>
            <ul id="data-list-down" class="headline loading">
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src>
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月22日 12:01</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p
                  class="content"
                >滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src>
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月12日 13：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p
                  class="content"
                >滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src="~/assets/img/widget-list01.png">
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月12日 13：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p class="content"></p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src>
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月7日 10：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p
                  class="content"
                >滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src="~/assets/img/widget-list02.png">
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月12日 13：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p class="content"></p>
              </li>
              <li class="headline-item">
                <div class="fl indexImg">
                  <img src>
                </div>
                <div class="words">
                  <h3>Drive.ai融资5000万吴恩达加入董事会
                    <span>
                      <img src="~/assets/img/widget-vip.png" class="vip">
                    </span>
                  </h3>
                  <h5 class="author">
                    <div class="fl">
                      <span class="authorName">
                        <img src="~/assets/img/widget-photo.png" alt> 玻璃通
                      </span>
                      <span>6月7日 10：34</span>
                    </div>
                    <div class="fr attention">
                      <span class="attentionText">关注</span>
                      <span class="beforeclose">
                        <i class="fa fa-times delete" aria-hidden="true"></i>
                        <i class="nolike">不感兴趣</i>
                      </span>
                    </div>
                    <div class="clearfix"></div>
                  </h5>
                </div>
                <p
                  class="content"
                >滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p>
              </li>
            </ul>
            <ul id="loaded" class="headline"></ul>
          </div>
          <!-- <script src="~/assets/data-list.js" type="text/javascript"></script> -->
        </div>
        <div class="fl right">
          <div class="activity">
            <div class="acti">
              <img src="~/assets/img/widget-activity01.png" alt="活动一">
            </div>
            <div class="acti">
              <img src="~/assets/img/widget-activity02.png" alt="活动一">
            </div>
          </div>
          <div class="block-btn">
            <p>今天，有什么好东西要和大家分享么?</p>
            <a
              class="sui-btn btn-block btn-share"
              href="~/assets/headline-submit.html"
              target="_blank"
            >发布分享</a>
          </div>
          <div class="question-list">
            <h3 class="title">热门回答</h3>
            <div class="lists">
              <ul>
                <li class="list-item">
                  <p class="list-title">关于系统问答你都应该都应该都应该注意些什么吗？</p>
                  <p class="authorInfo">
                    <span class="authorName">
                      <img src="~/assets/img/widget-photo.png" alt>玻璃筒
                    </span>
                    <span>6月22日 12:01</span>
                  </p>
                </li>
                <li class="list-item">
                  <p class="list-title">关于系统问答你都应该注意吗？</p>
                  <p class="authorInfo">
                    <span class="authorName">
                      <img src="~/assets/img/widget-photo.png" alt>玻璃筒
                    </span>
                    <span>6月22日 12:01</span>
                  </p>
                </li>
                <li class="list-item">
                  <p class="list-title">关于系统问答你都应该注意吗？</p>
                  <p class="authorInfo">
                    <span class="authorName">
                      <img src="~/assets/img/widget-photo.png" alt>玻璃筒
                    </span>
                    <span>6月22日 12:01</span>
                  </p>
                </li>
                <li class="list-item">
                  <p class="list-title">关于系统问答你都应该注意吗？</p>
                  <p class="authorInfo">
                    <span class="authorName">
                      <img src="~/assets/img/widget-photo.png" alt>玻璃筒
                    </span>
                    <span>6月22日 12:01</span>
                  </p>
                </li>
                <li class="list-item">
                  <p class="list-title">关于系统问答你都应该注意吗？</p>
                  <p class="authorInfo">
                    <span class="authorName">
                      <img src="~/assets/img/widget-photo.png" alt>玻璃筒
                    </span>
                    <span>6月22日 12:01</span>
                  </p>
                </li>
              </ul>
              <a class="sui-btn btn-block btn-bordered btn-more">查看更多</a>
            </div>
          </div>
          <div class="card-list">
            <div class="head">
              <h3 class="title">遇见TA</h3>
            </div>
            <div class="list">
              <ul>
                <li class="card-item">
                  <div class="attention">
                    <span>关注匹配度：
                      <i class="degree">83%</i>
                    </span>
                    <span class="fr">
                      <i class="fa fa-heart-o" aria-hidden="true"></i>
                      <i class="fa fa-times close" aria-hidden="true"></i>
                    </span>
                  </div>
                  <div class="img">
                    <img src="~/assets/img/widget-t01be3f1015cf52e1f3.png" alt>
                  </div>
                  <div class="info">
                    <div class="fl photo">
                      <img src="~/assets/img/widget-photo.png" alt>
                    </div>
                    <div class="fl intro">
                      <p>【馨儿】发布了雕刻时光约会邀请</p>
                      <p class="name">玻璃通
                        <span class="date">6月22日 12:01</span>
                      </p>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                </li>
                <li class="card-item">
                  <div class="attention">
                    <span>关注匹配度：
                      <i class="degree">86%</i>
                    </span>
                    <span class="fr">
                      <i class="fa fa-heart-o" aria-hidden="true"></i>
                      <i class="fa fa-times close" aria-hidden="true"></i>
                    </span>
                  </div>
                  <div class="img">
                    <img src="~/assets/img/widget-MOG88A60E7ZI.png" alt>
                  </div>
                  <div class="info">
                    <div class="fl photo">
                      <img src="~/assets/img/widget-photo.png" alt>
                    </div>
                    <div class="fl intro">
                      <p>【馨儿】发布了雕刻时光约会邀请</p>
                      <p class="name">玻璃通
                        <span class="date">6月22日 12:01</span>
                      </p>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                </li>
                <li class="card-item">
                  <div class="attention">
                    <span>关注匹配度：
                      <i class="degree">78%</i>
                    </span>
                    <span class="fr">
                      <i class="fa fa-heart-o" aria-hidden="true"></i>
                      <i class="fa fa-times close" aria-hidden="true"></i>
                    </span>
                  </div>
                  <div class="img">
                    <img src="~/assets/img/widget-t019e2d84e53580b099.png" alt>
                  </div>
                  <div class="info">
                    <div class="fl photo">
                      <img src="~/assets/img/widget-photo.png" alt>
                    </div>
                    <div class="fl intro">
                      <p>【馨儿】发布了雕刻时光约会邀请</p>
                      <p class="name">玻璃通
                        <span class="date">6月22日 12:01</span>
                      </p>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                </li>
              </ul>
              <a class="sui-btn btn-block btn-bordered btn-more">查看更多</a>
            </div>
          </div>
          <div class="activity-list">
            <h3 class="title">活动日历</h3>
            <div class="list">
              <ul>
                <li class="list-item">
                  <p class="list-time">2017/06/30 北京</p>
                  <div class="list-content clearfix">
                    <div class="fl img">
                      <img src="~/assets/img/widget-simple.png" alt>
                    </div>
                    <div>
                      <p>在线峰会 | 前端开发重难点技术剖析与创新实践</p>
                    </div>
                  </div>
                </li>
                <li class="list-item">
                  <p class="list-time">2017/06/30 北京</p>
                  <div class="list-content clearfix">
                    <div class="fl img">
                      <img src="~/assets/img/widget-simple.png" alt>
                    </div>
                    <div>
                      <p>在线峰会 | 前端开发重难点技术剖析与创新实践</p>
                    </div>
                  </div>
                </li>
                <li class="list-item">
                  <p class="list-time">2017/06/30 北京</p>
                  <div class="list-content clearfix">
                    <div class="fl img">
                      <img src="~/assets/img/widget-simple.png" alt>
                    </div>
                    <div>
                      <p>在线峰会 | 前端开发重难点技术剖析与创新实践</p>
                    </div>
                  </div>
                </li>
                <li class="list-item">
                  <p class="list-time">2017/06/30 北京</p>
                  <div class="list-content clearfix">
                    <div class="fl img">
                      <img src="~/assets/img/widget-simple.png" alt>
                    </div>
                    <div>
                      <p>在线峰会 | 前端开发重难点技术剖析与创新实践</p>
                    </div>
                  </div>
                </li>
              </ul>
              <a class="sui-btn btn-block btn-bordered btn-more">查看更多</a>
            </div>
          </div>
          <div class="ad-carousel">
            <div class="carousel">
              <div
                id="myCarousel"
                data-ride="carousel"
                data-interval="4000"
                class="sui-carousel slide"
              >
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="active item">
                    <img src="~/assets/img/widget-ad01.png">
                  </div>
                  <div class="item">
                    <img src="~/assets/img/widget-ad01.png">
                  </div>
                  <div class="item">
                    <img src="~/assets/img/widget-ad01.png">
                  </div>
                </div>
                <span class="adname">广告</span>
              </div>
            </div>
          </div>
          <!-- <link rel="import" href=".~/assets/.~/assets/modules/ui-modules/footer/footer.html?__inline"> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "~/assets/css/page-headline-logined.css";
export default {};
</script>

